<template>
	<view>
		<Filter :isOptional="isOptional && collectList && collectList.length > 0" :list="collectList || []"
			@toSort="toSort" /> <!-- 修复组件闭合 -->
		<view v-if="collectList && collectList.length > 0">
			<CollectItem v-for="(item, index) in filterKeyCoin(collectList, searchName, 2)" :key="index"
				:collectItem="item" @click="linkTo(item)" /> <!-- 修复组件闭合 -->
		</view>
		<view v-else>
			<Nodata></Nodata>
			<view class="addOptional">
				<view class="addOptionalBtn" @click="$router.push('/addOptional')">
					+{{ _t18(`quote_addOwn`) }}
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		_t18
	} from '@/utils/public'
	import {
		filterKeyCoin
	} from '@/utils/filters'
	import Filter from './common/filter.vue'
	import CollectItem from './common/collectItem.vue'
	import {
		getCollect
	} from '@/api/trade'
	import {
		onMounted,
		ref
	} from 'vue'
	import {
		useUserStore
	} from '@/store/user'
	import {
		useRouter
	} from 'vue-router'

	const props = defineProps({
		searchName: {
			type: String
		}
	})
	const isOptional = ref(true)
	// 自选列表
	const collectList = ref([])
	const getCollectList = async () => {
		try {
			const res = await getCollect()
			if (res.code == 200) {
				collectList.value = res.data || []
			} else {
				collectList.value = []
			}
		} catch (error) {
			console.error('获取自选列表失败:', error)
			collectList.value = []
		}
	}
	const userStore = useUserStore()
	onMounted(() => {
		if (userStore.isSign) {
			getCollectList()
		}
	})
	const toSort = (v) => {
		collectList.value = v
	}

	const router = useRouter()
	const linkTo = (item) => {
		router.push(`/trade?symbol=${item.coin}`)
	}
</script>

<style lang="scss" scoped>
	.addOptional {
		padding: 0 15px 81px;
		display: flex;
		// align-items: center;

		.addOptionalBtn {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			height: 50px;
			background: var(--ex-div-bgColor1);
			border-radius: 6px;
			font-size: 16px;
			font-weight: normal;
			color: var(--ex-font-color);
		}
	}
</style>